import React from 'react';
import {Card, Button, Table, Form, Select, Modal,message} from 'antd';
import './../../style/common.less'
import axios from './../../axios/index';
import Utils from './../../utils/utils';

const FormItem = Form.Item
const Option = Select.Option
export default class City extends React.Component{
    state = {
        list:[],
        isShowOpenCity:false
    }
    params = {
        page:1
    }

    componentDidMount() {
        this.requestList()
    }

    //请求接口数据
        requestList = () => {
            let _this = this;
            //防止获取不到作用域
            axios.ajax({
                url:'/open_city',
                data:{
                    params:{
                        page:this.params.page
                    }
                }
            }).then((res) => {
                let list = res.result.item_list.map((item, index) => {
                    item.key = index;
                    return item;
                });
                this.setState({
                    list:list,
                    pagination:Utils.pagination(res,(current)=>{
                        _this.params.page = current;
                        _this.requestList();
                    })
                })
            })
        }
    //开通城市
    handleOpenCity = () => {
        this.setState({
            isShowOpenCity:true
        })
    }
    //开通城市提交
    handleSubmit = () => {
        //获取当前文本框的值 ref selcet这两个封装好的 city_id="2"
      let cityInfo = this.cityForm.props.form.getFieldsValue();
      console.log(cityInfo)
      axios.ajax({
          url:"/city/open",
          data:{
              params:cityInfo
          }
      }).then((res) => {
          if(res.code == '0') {
              message.success("开通成功");
              this.setState({
                  isShowOpenCity:false
              })
              this.requestList()
          }
      })
    }
    render() {
        const columns = [
            {
                title:'城市ID',
                dataIndex:'id'
            }, {
                title: '城市名称',
                dataIndex: 'name'
            }, {
                title: '用车模式',
                dataIndex: 'mode',
                render(mode){
                    return mode ==1 ?'停车点':'禁停区';
                }
            }, {
                title: '营运模式',
                dataIndex: 'op_mode',
                render(op_mode) {
                    return op_mode == 1 ? '自营' : '加盟';
                }
            }, {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            }, {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render(arr){
                    return arr.map((item)=>{
                        return item.user_name;
                    }).join(',');
                }
            }, {
                title: '城市开通时间',
                dataIndex: 'open_time'
            }, {
                title: '操作时间',
                dataIndex: 'update_time',
                render: Utils.formateDate
            }, {
                title: '操作人',
                dataIndex: 'sys_user_name'
            }
        ]
        return (
            <div>
                <Card>
                   <FilterFrom />
                </Card>
                <Card>
                  <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <div className="content-wrap">
                <Table 
                 bordered
                 columns={columns}
                    dataSource={this.state.list}
                     pagination={this.state.pagination}
                />
                </div>
                <Modal
                title="开通城市"
                //visible控制弹窗显示还是隐藏
                visible={this.state.isShowOpenCity}
                //onCancel取消事件
                onCancel={ () => {
                    this.setState({
                        isShowOpenCity:false
                    })
                }} 
                onOk = {this.handleSubmit}
                >
                    {/* wrappedComponentRef */}
                        <OpenCityFrom wrappedComponentRef={
                            (inst) =>(this.cityForm=inst)
                        }></OpenCityFrom>
                </Modal>
            </div>
        )
    }
} 
class FilterFrom extends React.Component{
    render() {
        //getFieldDecorator实现双向绑定
        const { getFieldDecorator} = this.props.form;
        return (
            <Form layout='inline'>
                <FormItem  label="城市" > 
                    {
                        getFieldDecorator('city_id')(
                            <Select placeholder="全部" style={{width:100}}>
                                <Option value=''>请选择</Option>
                                <Option value='1'>哈尔滨</Option>
                                <Option value='2'>北京</Option>
                                <Option value='3'>天津</Option>
                            </Select>
                        )
                    } 
                </FormItem>

                <FormItem  label="用车模式" > 
                    {
                        getFieldDecorator('mode')(
                            <Select placeholder="全部" style={{width:140}}>
                                <Option value=''>全部</Option>
                                <Option value='1'>指定停车点模式</Option>
                                <Option value='2'>禁停区模式</Option>
                              
                            </Select>
                        )
                    }
                </FormItem>

                <FormItem  label="营运模式" > 
                    {
                        getFieldDecorator('op_mode')(
                            <Select placeholder="全部" style={{width:80}}>
                                <Option value=''>全部</Option>
                                <Option value='1'>自营</Option>
                                <Option value='2'>加盟</Option>
                              
                            </Select>
                        )
                    }
                </FormItem>

                <FormItem  label="加盟商授权状态" > 
                    {
                        getFieldDecorator('auth_status')(
                            <Select placeholder="全部" style={{width:100}}>
                                <Option value=''>全部</Option>
                                <Option value='1'>已授权</Option>
                                <Option value='2'>未授权</Option>
                              
                            </Select>
                        )
                    }
                </FormItem>

                <FormItem   > 
                    <Button type="primary" style={{margin:'0 20px'}}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        )
    }
} 
FilterFrom = Form.create({})(FilterFrom)
 class OpenCityFrom extends React.Component{
    render() {
        const formItemLayout={
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:7
            } 
        }
        const { getFieldDecorator} = this.props.form;
        //getFieldDecorator双向数据绑定不需要change事件
        //select自动会转换当前选中的value  不需要去考虑了
        return (
            <Form layout="horizontal">
                <FormItem label="选择城市" {...formItemLayout}>
                    {
                        getFieldDecorator('city_id',{
                            initialValue:"1"
                        })(
                            <Select>
                        <Option value="1">全部</Option>
                        <Option value="2">北京市</Option>
                        <Option value="3">天津市</Option>
                    </Select>
                        )
                    }
                    
                </FormItem>
                <FormItem label="营运模式" {...formItemLayout}>
                     {
                        getFieldDecorator('op_mode',{
                            initialValue:"1"
                        })(
                            <Select>
                               <Option value="1">自营</Option>
                               <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式" {...formItemLayout}>
                   {
                        getFieldDecorator('use_mode',{
                            initialValue:"1"
                        })(
                             <Select>
                                 <Option value="1">指定停车点</Option>
                                 <Option value="2">禁停区</Option>
                             </Select>
                        )
                    }
                    
                </FormItem>
            </Form>
        )
    }
 }
 //From.create可以实现双向数据绑定
 OpenCityFrom = Form.create({})(OpenCityFrom)